<template>
  <div class="marketview-container bg-blue-50">
    <div class="market-box">
      <div class="select-grid container justify-between">
        <div class="select-left">
          <el-select
            v-model="value"
            clearable
            placeholder="请选择"
            size="medium"
            @change="selectChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- <el-checkbox v-model="radiochecked" fill="#2469e5" @change="change"
            >仅看寄售</el-checkbox
          > -->
        </div>
        <div class="select-right flex justify-center">
          <el-input
            placeholder="请输入内容"
            v-model="searchInput"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchInputChange"
            ></el-button>
          </el-input>
        </div>
      </div>
      <marketvue :gird-show-num="girdShowNum" :sort="sort" :search="searchWord"></marketvue>
    </div>
  </div>
</template>

<script>
import marketvue from "@/components/Market.vue";

export default {
  name: "marketview",
  components: { marketvue },
  data() {
    return {
      ismenuHidden: false,
      isShow: false,
      isSelect: NaN,
      clientWidth: document.body.clientWidth,
      girdShowNum: 4,
      searchInput: "",
      radiochecked: true,
      options: [
        {
          value: "time",
          label: "最新上架",
        },
        {
          value: "up",
          label: "价格降序",
        },
        {
          value: "down",
          label: "价格升序",
        },
      ],
      value: "",
      sort:"",
      searchWord:"",
    };
  },
  methods: {
    menuHidden() {
      this.ismenuHidden = !this.ismenuHidden;
    },
    handleOpen(key, keyPath) {
      this.isShow = !this.isShow;
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    searchInputChange() {
      this.searchWord=this.searchInput;
      console.log(this.searchInput)
    },
    selectChange(value){
      this.sort=value
      console.log(value)
    },
    change(value){
      console.log(value)
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.clientWidth = document.body.clientWidth;
      })();
    };
    if (this.clientWidth > 768) {
      this.girdShowNum = 4;
    } else if (this.clientWidth <= 768) {
      this.girdShowNum = 2;
    }
  },
  watch: {
    clientWidth(Val) {
      if (Val > 768) {
        this.girdShowNum = 4;
      } else if (Val <= 768) {
        this.girdShowNum = 2;
      }
    },
  },
};
</script>
<style  lang="less" scoped>
.marketview-container {
  position: relative;
  // height: 100vh;
  overflow: hidden;
  transition: 0.5s;
  display: flex;
  justify-content: flex-start;
  @bg-blue-50;

  .menu.hidden {
    // width: 30px;
    left: -250px;

    .el-icon-back {
      transform: rotate(180deg);
    }

    .menubox {
      left: -101% !important;
      // display: none;
      overflow: hidden;
    }
  }

  .menu.hidden + .market-box {
    left: 50px;
    // width: calc(100%);
    width: calc(100% - 50px);
  }

  .menu {
    position: fixed;
    padding-top: 80px;
    width: 300px;
    left: -0%;
    height: 100%;
    box-sizing: border-box;
    // background: #2469e5;
    border-right: 1px solid rgba(128, 128, 128, 0.496);
    background: #fff;
    transition: 0.5s;
    flex-shrink: 0;
    z-index: 99;

    .menu-show {
      position: relative;
      width: 100%;
      height: 40px;

      .el-icon-back {
        position: absolute;
        right: 5%;
        top: 10px;
        font-size: 20px;
      }
    }

    .menubox {
      position: relative;
      width: 100%;
      left: 0%;
      transform: 0.5s;

      .menuli {
        width: 100%;
        height: auto;
        overflow: hidden;

        box-sizing: border-box;

        .title {
          width: 100%;
          height: 50px;
          padding: 5px;
          line-height: 45px;
          box-sizing: border-box;
          background: #fff;
          display: flex;
          justify-content: space-between;
          cursor: pointer;

          i {
            // font-size: 20px;
            line-height: 50px;
          }
        }

        .title.active {
          .el-icon-arrow-down {
            transition: 0.5;
            transform: rotate(180deg);
          }
        }

        .select-box {
          width: 100%;
          height: 0px;
          background: #f4f4f4;
          display: flex;
          // justify-content: center;
          flex-wrap: wrap;
          overflow: hidden;
          // transition: .5s;
          overflow: hidden;

          .select {
            width: 50%;
            padding: 5px;
            // background: #fff;
            box-sizing: border-box;

            .select-span {
              background: #fff;
              box-sizing: border-box;
              padding-top: 5px;
              padding-bottom: 5px;
              cursor: pointer;
              transition: 0.5;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }

            .select-span.active {
              background: #2469e5;
              color: #fff;
            }
          }
        }

        .select-box.active {
          padding-top: 10px;
          padding-bottom: 10px;
          box-sizing: border-box;
          height: auto;
        }
      }
    }

    .menubox::before {
      content: "";
      position: absolute;
      top: 0%;
      left: 0%;
      width: 99%;
      height: 1px;
      background: gray;
      opacity: 0.5;
    }
  }

  .market-box {
    position: relative;
    width: 100%;
    // left: 300px;
    // background: #fff;
    // width: calc(100% - 300px);
    padding-top: 6rem;
    height: auto;
    // overflow: scroll;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: 0.5s;
    display: flex;
    flex-direction: column;
    align-items: center;

    .select-grid {
      position: relative;
      // align-self: flex-start;
      // left: 5%;
      height: 50px;
      display: flex;
      max-width: 1280px;
      padding: 0 4rem;

      .select-left {
        display: flex;
        align-items: center;
        /deep/ .el-checkbox{
          padding: 0rem 1rem;

          .el-checkbox__inner{
            border-color:#2469e5;
          }
          .el-checkbox__label{
            color: #2469e5;
          }
        }
        /deep/ .el-checkbox.is-checked{
          border-color:#2469e5;
          .el-checkbox__inner{
            background: #2469e5;

          }

        }
        /deep/ .el-input {
          width: 150px;

          .el-input__inner {
            @apply rounded-3xl;
          }
        }

        /deep/ .is-focus .el-input__inner {
          border-color: #2469e5;
        }
      }

      .select-right {
        align-items: center;
        .input-box {
          height: 40px;
          border: 1px solid #2469e5;
          border-radius: 24px;
          padding: 0 10px;

          input {
            border: none;
            outline: none;
            height: 40px;
            border-radius: 24px;

            padding-left: 10px;
            box-sizing: border-box;
            margin-right: 10px;
          }

          button {
            margin-left: 10px;

            padding: 5px 10px 5px 10px;
            border: none;
            border-radius: 24px;
            background: #2469e5;
            cursor: pointer;
            color: #fff;
          }
        }
      }

      .el-select {
        position: relative;
        margin-left: 20px;

        .el-scrollbar__view {
          .el-select-dropdown__item {
            padding-left: 10px !important;
          }
        }
      }
    }

    .market-container {
      margin-top: 1rem;
    }
  }
}
</style>